<template>
    <el-row>
        <el-col :span="8">
            <div class="grid-content ep-bg-purple"/>
        </el-col>
        <el-col :span="8"
                v-loading="loading"
                element-loading-text="登陆中..."
                :element-loading-spinner="loadingSvg"
                element-loading-svg-view-box="-10, -10, 50, 50"
                element-loading-background="rgba(255,250,240,0.8)">
            <div class="grid-content ep-bg-purple-light"/>
            <el-form
                    ref="ruleFormRef"
                    :model="ruleForm"
                    status-icon
                    :rules="rules"
                    label-width="120px"
                    class="demo-ruleForm"
            >
                <el-form-item label="邮箱" prop="username">
                    <el-input v-model="ruleForm.username"/>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" type="password" autocomplete="off"/>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">登陆</el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                    <el-button type="danger" @click="resetPasswordVisible = true">忘记密码</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="8">
            <div class="grid-content ep-bg-purple"/>
        </el-col>
    </el-row>

    <!--重置密码窗口 start    -->
    <el-dialog v-model="resetPasswordVisible" title="重置密码">
        <el-form :model="resetPassForm" ref="restPassRuleFormRef" :rules="restPassRules">
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="resetPassForm.email"/>
            </el-form-item>
            <el-form-item label="验证码" prop="verificationCode">
                <el-input style="width: 73%" v-model="resetPassForm.verificationCode" type="text" autocomplete="off"/>
                <el-button style="width: 25%;margin-left: 2%" :disabled="getVerificationCodeBtn.disable"
                           type="primary" @click="getVerificationCode(resetPassForm)" plain>
                    {{getVerificationCodeBtn.text}}
                </el-button>
            </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="resetPasswordVisible = false">取消</el-button>
        <el-button type="primary" @click="resetPasswordFun(restPassRuleFormRef)">
          重置密码
        </el-button>
      </span>
        </template>
    </el-dialog>
    <!--重置密码窗口 end    -->

</template>

<script lang="ts" setup>
    import {reactive, ref} from 'vue'
    import type {FormInstance} from 'element-plus'
    import {ElMessage, ElMessageBox} from 'element-plus'
    import {loginFunction} from '@/common/service/login'
    import {useRouter} from 'vue-router'
    import {loadingSvg} from '@/utils/const-value'
    import {getVerificationCodeBtn, getVerificationCode} from '@/common/service/email'
    import {resetPassword} from '@/api/user'
    import {Local} from "@/utils/local";
    import emitter from "@/utils/event-bus";
    import {MittEventEnum} from "@/utils/enum/mitt-event-enum";
    import {LoginStateEnum} from "@/utils/enum/enum";

    let loading = ref(false)
    // 路由全局配置 相当于vue2中的this.$router
    const router = useRouter()
    const ruleFormRef = ref<FormInstance>()
    const restPassRuleFormRef = ref<FormInstance>()

    const resetPasswordVisible = ref(false)
    const formLabelWidth = '140px'
    const resetPassForm = reactive({
        verificationCode: '',
        email: '',
    })


    const checkUsername = (rule: any, value: any, callback: any) => {
        console.log("验证邮箱")
        if (!value) {
            return callback(new Error('请填写你的邮箱账号！'))
        }
        const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
        setTimeout(() => {
            if (!regEmail.test(value)) {
                callback(new Error('请输入合法的邮箱!'))
            } else {
                callback()
            }
        }, 1000)
    }

    const validatePass = (rule: any, value: any, callback: any) => {
        if (value === '') {
            callback(new Error('请填写密码!'))
        } else {
            callback()
        }
    }

    const ruleForm = reactive({
        password: '',
        username: '',
    })

    const restPassRules = reactive({
        email: [{validator: checkUsername, trigger: 'blur'}],
    })

    const rules = reactive({
        password: [{validator: validatePass, trigger: 'blur'}],
        username: [{validator: checkUsername, trigger: 'blur'}],
    })

    const submitForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        loading.value = true;
        formEl.validate((valid) => {
            if (valid) {
                loginFunction(ruleForm.username, ruleForm.password).then(function () {
                    loading.value = false;
                    router.push({name: "home"})
                }).catch(function (data) {
                    ElMessageBox.confirm(
                        data,
                        '异常',
                        {
                            confirmButtonText: '确认',
                            cancelButtonText: '返回',
                            type: 'error',
                        }
                    ).then(() => {
                        loading.value = false;
                    })
                });
            } else {
                console.log('error submit!')
                return false
            }
        })
    }

    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
    }
    const resetPasswordFun = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.validate((valid) => {
            if (valid) {
                resetPassword(resetPassForm.email, resetPassForm.verificationCode).then(response => {
                    if (response['code'] == 200) {
                    }
                })
            }
        })
    };
</script>
